<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>刮刮卡</title>
		<style type="text/css">
			.main{
				width: 800px;
				height: 600px;
				position: relative;
			}
			.text{
				width: 800px;
				height: 600px;
				text-align: center;
				line-height: 600px;
				font-size: 30px;
				color: lightcoral;
				position: absolute;
				left: 0;
				top: 0;
			}
			#canvas{
				position: absolute;
				left: 0;
				top: 0;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="text">
				谢谢惠顾
			</div>
			<canvas id="canvas" width="800" height="600"></canvas>
		</div>
		<script type="text/javascript">
			var canvasDom = document.querySelector("#canvas");
			var ctx = canvasDom.getContext("2d");
			var mainDom = document.querySelector(".main");
			var textDom = document.querySelector(".text")
			ctx.fillStyle = "darkgray";
			ctx.fillRect(0,0,800,600);
			var canDraw = false;
			canvasDom.onmousedown = function(e){
				console.log(e)
				
				canDraw = true;
			}
			canvasDom.onmouseup = function(e){
				console.log(e)
				
				canDraw = false
			}
			canvasDom.onmousemove = function(e){
				if(canDraw){
					//console.log(e)
					var x = e.pageX-mainDom.offsetLeft;
					var y = e.pageY-mainDom.offsetTop;
					//console.log(x+":"+y)
					ctx.beginPath();
					ctx.fillStyle = "red"
					ctx.globalCompositeOperation = "destination-out"
					ctx.arc(x,y,40,0,2*Math.PI)
					ctx.fill();
					ctx.closePath()
				}
			}
			var jp = [{content:"一等奖",p:0.1},{content:"二等奖",p:0.2},{content:"三等奖",p:0.3}];
			var rn = Math.random();
			console.log(rn)
			if(rn < jp[0].p){
				textDom.innerText = jp[0].content
			}else if(rn < jp[1].p+jp[0].p){
				textDom.innerText = jp[1].content
			}else if(rn < jp[2].p+jp[1].p+jp[0].p){
				textDom.innerText = jp[2].content
			}
		</script>
	</body>
</html>
